<!--
消息详情 
在子路由中，通过 this.$route.params.参数名来接受传递过来的值
-->
<template>
  <div>
    <p>ID:{{$route.params.id}}</p>
    <ul>
        <li>id:{{messageDetail.id}}</li>
        <li>title:{{messageDetail.title}}</li>
        <li>content:{{messageDetail.content}}</li>
    </ul>
  </div>
</template>

<script>
export default {
  components: {},
  props: {},
  data() {
    return {
      messageDetail: {}
    };
  },
  watch: {
    // 事件的监听
    $route:function(value){ // 路由路径params改变
      const id=value.params.id*1;
      this.messageDetail = this.allMessageDetails.find(detail => detail.id===id);
    }
  },
  computed: {},
  methods: {},
  created() {},
  mounted() {
    setTimeout(() => {
      const allMessageDetails = [
        {
          id: 1,
          title: "标题1",
          content: "标题1 content1"
        },
        {
          id: 2,
          title: "标题2",
          content: "标题2 content2"
        },
        {
          id: 3,
          title: "标题3",
          content: "标题3 content3"
        },
        {
          id: 4,
          title: "标题4",
          content: "标题4 content4"
        }
      ];
      this.allMessageDetails = allMessageDetails;
      const id=this.$route.params.id*1;
      this.messageDetail = allMessageDetails.find(detail => detail.id===id);
    }, 1000);
  }
};
</script>
<style scoped>
</style>